<template>
	<div class="student">
		<!-- 搜索框 -->
		<div class="search">
			<template>
				<el-select v-model="searchValue" filterable remote @blur="searchBlur" reserve-keyword
					@change="searchTextChange" placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"
					clearable @clear="clear">
					<el-option v-for="item in searchList" :key="item.value" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
			</template>
			<!-- 搜索按钮 -->
			<el-button type="primary" icon="el-icon-search" @click="onSearchButtonClick" plain></el-button>
			<!-- 添加按钮 -->
			<el-button type="primary" @click="addStu" :disabled="disabled">添加学员</el-button>
		</div>
		<!-- 下拉班级列表 -->
		<div class="select-class">
			<p>选择班级：</p>
			<el-select v-model="classes" slot="prepend" filterable @visible-change="classVisible" @change="classChange"
				placeholder="请选择">
				<el-option v-loading="selectLoading" label="全部" value="all"></el-option>
				<el-option v-loading="selectLoading" v-for="(item, index) in classList" :key="index" :label="item"
					:value="item">
				</el-option>
			</el-select>
		</div>
		<!-- 导出excel -->
		<div class="exportExcel">
			<el-button icon="iconfont icon-excel" @click="exportExcel">导出excel数据</el-button>
		</div>
		<!-- 表格 -->
		<div class="stu-table">
			<template>
				<el-table :data="stuData" border style="width: 100%">
					<el-table-column prop="headimgurl" align="center" label="头像" width="100">
						<template slot-scope="scope">
							<el-avatar shape="square" :size="50" fit="fill" :src="scope.row.headimgurl"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="name" align="center" label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="class" align="center" label="班级" width='200'>
					</el-table-column>
					<el-table-column prop="cTime" align="center" label="创建时间" width='200'>
					</el-table-column>
					<el-table-column prop="degree" align="center" label="学历" width='200'>
					</el-table-column>
					<el-table-column prop="productUrl" align="center" label="项目">
					</el-table-column>
					<el-table-column prop="address" align="center" width="280" label="操作">
						<template slot-scope="{row}">
							<el-button type="primary" class="btn" size="mini" icon="el-icon-view">查看</el-button>
							<el-button class="btn" icon="el-icon-edit" size="mini" type="primary" @click="editStu(row)">
								编辑
							</el-button>
							<el-button class="btn" icon="el-icon-delete" size="mini" type="danger"
								@click="deleteStu(row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 分页器 -->
		<div class="pageination">
			<el-pagination hide-on-single-page background layout="prev, pager, next" :total="stuTotal"
				:page-size="stuPageSize" :current-page.sync="currentPage" @current-change="changePage">
			</el-pagination>
		</div>
		<!-- dialog弹出框 -->
		<qf-dialog></qf-dialog>
	</div>
</template>
<script>
import * as api from "@/api/users"
import { mapState, mapActions, mapMutations } from "vuex"
import dialog from "@/components/Dialog"
import qee from "qf-export-excel"   //前端导出excel的方法
export default {
	meta: {
		title: "xyxmgl",
		icon: "iconfont icon-shangpinguanli",
	},
	data() {
		return {
			params: {
				class: "",
				count: 5
			},
			tableData: [],
			//loading: false,  //表格加载动画控制
			dataPage: "",   //页码
			dataCount: 5,   //每页展示的数量
			//total: 0,   //总共的数据条数
			classList: [],   // 班级列表
			disabled: false,
			classes: "",   //v-model绑定的班级
			searchList: [],  //搜索框绑定的班级
			searchValue: "",
			classes: "",
			input: "",
			selectLoading: true,
			currentPage: 1   //当前页数
		}
	},
	components: {
		"qf-dialog": dialog
	},
	methods: {
		...mapActions(['GET_STULIST']),
		...mapMutations(['SHOW_DIALOG', 'CHANGE_DIALOG_TITLE', 'SET_STU_DATA']),
		//添加学员
		addStu() {
			//修改dialog标题
			this.CHANGE_DIALOG_TITLE('增加学员信息')
			//弹出dialog
			this.SHOW_DIALOG()
		},
		//选择班级
		classChange(query) {
			//1.classes展开的时候，需要展示所有的班级列表
			console.log(query);  //query就是选中的班级
			//2.选中班级列表的时候，要更新表格
			//调用早已封装好的GET_STULIST，传递班级就可以了
			//当query为all的时候，表示要展示全部的班级
			if (query === 'all') {
				query = ""   //后台会认为我们没有传班级，默认返回所有数据
			}
			this.GET_STULIST({ classes: query })
		},
		//班级选择框展开/收起触发的事件
		classVisible(isVisible) {
			//展开的时候需要获取数据
			this.selectLoading = true
			//调用获取列表的方法
			console.log(isVisible);
			if (isVisible) {
				//说明下拉框出现了
				api.getClassApi()
					.then(res => {
						console.log(res);
						this.classList = res.data.data
						this.selectLoading = false
					})
			}
		},
		//分页展示数据
		changePage(page) {
			console.log(page);
			//页码变更传给后台，重新获取数据
			this.GET_STULIST({ page })
		},
		//搜索学员功能
		searchTextChange(searchText) {
			console.log(searchText);
			api.searchStuApi(searchText, null, null)
				.then(res => {
					// console.log(res);
					this.currentPage = 1  //让分页器数值初始化
					//列表更新
					this.SET_STU_DATA(res.data)
				})
		},
		//获取到输入值，这里要做防抖处理
		remoteMethod(query) {
			//键盘弹起的时候获取输入值
			console.log(query);
			this.searchValue = query
			//向后台发起请求
			api.searchStuApi(query, null, null)
				.then((res) => {
					console.log(res);
					//搜索数组去重
					let norepeat = []
					let flag = true
					for (var i = 0; i < res.data.data.length; i++) {
						flag = true
						for (var k = 0; k < norepeat.length; k++) {
							if (norepeat[k].name === res.data.data[i].name) {
								flag = false
								break
							}
						}
						if (flag) {
							norepeat.push(res.data.data[i])
						}
					}
					console.log(norepeat);
					this.searchList = norepeat
				})
		},
		//点击搜索按钮
		onSearchButtonClick() {
			console.log(this.searchValue);
			api.searchStuApi(this.searchValue, null, null)
				.then(res => {
					this.SET_STU_DATA(res.data)
				})
		},
		//搜索框失去焦点，保持输入值的内容
		searchBlur() {
			this.searchValue = ""  //失去焦点时，清空输入框的值
		},
		//编辑学员
		editStu(row) {
			//编辑学员信息
			this.CHANGE_DIALOG_TITLE("编辑学员信息"),
				this.SHOW_DIALOG()
		},
		//删除学员
		deleteStu(row) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//发请求成功
				api.delStuApi(row.sId)
					.then(res => {
						console.log(res);
						if (res.data.state) {  //删除成功
							//更新列表
							this.GET_STULIST()
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						} else {
							//删除失败，这条数据已经被别人删除了
							this.$message.error("删除失败，数据不存在")
						}
					})

			}).catch(() => {
				this.$message({
					type: 'warning',
					message: '已取消删除'
				});
			});
		},
		//清空输入框的时候应该显示第一页
		clear() {
			console.log(currentPage);
			this.currentPage = 1
		},
		//导出excel
		exportExcel() {
			let titleList = [
				{
					title: '头像地址',
					key: 'headimgurl',
				},
				{
					title: '姓名',
					key: 'name',
				},
				{
					title: '学历',
					key: 'degree',
				},
				{
					title: '班级',
					key: 'class',
				},
				{
					title: '项目地址',
					key: 'productUrl',
				},
				{
					title: '创建时间',
					key: 'cTime',
				}
			]
			qee(titleList, this.stuData, '2204班级信息')
			/**
			 * @param {Array} titleList 传入的标题数据和需要导出的key
			 * @param {Array} dataSource 传入的数据源
			 * @param {String} fileName 导出的文件名
			 */
		}
	},

	created() {
		//获取学员列表
		this.GET_STULIST()
	},
	computed: {
		...mapState(['stuData', 'loading', "stuTotal", "stuPageSize"])
	}
};
</script>
<style>
.search input {
	width: 200px;
}

.stu-table button {
	width: 80px;
}
</style>